html,body {
  width: 100%;
  height: 100%;
}
body {
  font-size: 14px;
  color: #000;
  min-width: 1280px;
  background: url('../imgs/bg.jpg') no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  color: #fff;
}



.padd10{
  box-sizing: border-box;
  padding: 8px;
}
input {
  outline: none;
  box-sizing: border-box;
  border-radius: 5px;
  padding-left: 10px;
  border: none;
}

.box {
  width: 100%;
  height: 100%;
  display: flex;
  .left {
    flex:1;
    margin-right: 8px;    
    .inner {
      display: flex;
      flex-direction: column;
      
      // 输入框盒子
      .intBox {
        height: 50px;
        display: flex;
        border-bottom: 1px solid #000;
        .item {
          flex: 2;
          display: flex;
          box-sizing: border-box;
          padding-right: 10px;
          .info {
            flex: 100px;
            line-height: 34px;
            text-align: center;
            font-weight: 800;
          }
          input {
            flex: 1;
            
          }
        }
        .btn{
          flex: 1;
          box-sizing: border-box;
          border: 1px solid #ccc;
          border-radius: 5px;
          cursor: pointer;
          line-height: 34px;
          text-align: center;
        }
      }
      // 列表
      .list {
        flex: 1;
        display: flex;
        flex-direction: column;
        .title {
          height: 30px;
          box-shadow: 0 3px 5px rgba(0,0,0,0.3);
          background-color:#1E90FF;
          display: flex;
          color: #fff;
          line-height: 30px;
          text-align: center;
          font-weight: 800;
          .item {
            flex: 1;
            border-right: 1px solid #000;
          }
          .item:last-child {
            border-right: 0px solid #000;
          }
        }
        .listBox {
          flex: 1;
          overflow-y: auto;
          .one {
            height: 26px;
            line-height: 26px;
            display: flex;
            border-bottom: 1px solid#808080;
            transition: all 0.3s;
            .item {
              flex: 1;
              border-right: 1px solid#808080;
              text-align: center;
            }
            .item:last-child {
              border-right: 0px solid #000;
              display: flex;
              justify-content: space-around;
              align-items: center;
              i {
                width: 20px;
                height: 20px;
                cursor: pointer;
                background: url('../imgs/del.png') no-repeat;
                background-position: center center;
                background-size: 20px;
              }
              
            }
          }
          .one:hover {
            box-shadow: 0 0px 10px rgba(255,255,255,0.5);
            background-color: rgba(0,0,0,0.65);
          }
        }
      }
    }
    

  }
  .right {
    width: 500px;
    display: flex;
    flex-direction: column;
    .item {
      flex: 1;
    }
    .item:first-child {
      margin-bottom: 4px;
    }
     .item:last-child {
      margin-top: 4px;
    }
  }
  .panel {
    border: 10px solid #ccc;
    border-width: 51px 38px 20px 132px;
    border-image-source: url('../imgs/border.png');
    border-image-slice: 51 38 20 132;
    border-image-repeat: stretch;
    position: relative;
    .inner {
      position: absolute;
      top: -51px;
      right: -38px;
      bottom: -20px;
      left: -132px;
      /* background-color: green; */
      box-sizing: border-box;
      padding: 20px;
    }
  }
}